import { memo, ReactElement, useState } from "react";
import styles from "./index.module.scss";
import type { FC } from "react";
import classNames from "classnames";
export interface IProps {
  selectData?: any[];
  onItemClick?: (item: any) => void;
}

const SortBy: FC<IProps> = memo(function (props) {
  const { selectData = [], onItemClick } = props;
  const [cIndex, setCIndex] = useState<number>(0);
  const handleItemClick = (item: any, index: number) => {
    setCIndex(index);
    console.log(item);

    onItemClick && onItemClick(item);
  };
  return (
    <div className={styles.container}>
      <div className={styles.filter}>
        {selectData.map((item, index) => {
          return (
            <span
              className={classNames(styles.sort, {
                [styles.active]: index === cIndex,
              })}
              onClick={() => handleItemClick(item, index)}
              key={item.id}
            >
              {item.name}
            </span>
          );
        })}
      </div>
    </div>
  );
});

export default SortBy;
SortBy.displayName = "SortBy";
